<template>
    <div>

        <div style="padding: 30px">
            <div>我的投递信息</div>
        </div>

        <!--职位详情信息容器-->
        <div class="position_manager_info_contain">
            <!--数据内容-->
            <div>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            label="职位名称"
                            width="180"
                            prop="jobName">
                    </el-table-column>

                    <el-table-column
                            prop="jobDeptement"
                            label="职位部门"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="jobContact"
                            label="联系人"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="jobPhone"
                            label="联系电话"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="jobWechat"
                            label="联系微信"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="createTime"
                            label="投递时间"
                            width="180">
                    </el-table-column>


                    <el-table-column
                            prop="feedback"
                            label="投递反馈"
                            width="100">
                        <template slot-scope="scope">
                            <el-tag type="info" size="small" v-if="scope.row.feedback == 0">未反馈</el-tag>
                            <el-tag type="success" size="small" v-else-if="scope.row.feedback == 1">合适</el-tag>
                            <el-tag type="danger" size="small" v-else-if="scope.row.feedback == 2">不合适</el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="200"
                    >
                        <template slot-scope="scope">
                            <el-button
                                    @click="positionDetailInfo(scope.row)"
                                    type="text"
                                    size="small">
                                职位详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--分页条-->
            <div style="text-align: center;margin-top: 15px">
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>


            <!--职位详情Dialog-->
            <el-dialog
                    title="职位详情"
                    :close-on-click-modal="false"
                    :visible.sync="detailPositionDialogVisit">
                <el-form :model="dataForm"
                         label-width="130px"
                         :inline="true"
                >
                    <el-form-item label="职位名称" prop="jobName">
                        <el-col :span="24">
                            <el-input disabled v-model="dataForm.jobName" placeholder="职位名称"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="职位部门" prop="jobDeptement">
                        <el-input  disabled v-model="dataForm.jobDeptement" placeholder="职位部门"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="jobContact">
                        <el-input disabled v-model="dataForm.jobContact" placeholder="联系人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系手机" prop="jobPhone">
                        <el-input disabled v-model="dataForm.jobPhone" placeholder="联系手机"></el-input>
                    </el-form-item>
                    <el-form-item label="联系固话" prop="jobFixPhone">
                        <el-input disabled v-model="dataForm.jobFixPhone" placeholder="联系固话"></el-input>
                    </el-form-item>
                    <el-form-item label="联系微信" prop="jobWechat">
                        <el-input disabled v-model="dataForm.jobWechat" placeholder="联系微信"></el-input>
                    </el-form-item>
                    <el-form-item label="联系邮箱" prop="jobEmail">
                        <el-input disabled v-model="dataForm.jobEmail" placeholder="联系邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="联系qq" prop="jobQq">
                        <el-input disabled v-model="dataForm.jobQq" placeholder="联系qq"></el-input>
                    </el-form-item>


                    <el-form-item label="紧急招聘" prop="isUrgency">
                        <el-col :span="22">
                            <el-select disabled v-model.number="dataForm.isUrgency" placeholder="是否急聘">
                                <el-option label="急聘" value="1"></el-option>
                                <el-option label="非急聘" value="0"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="所属行业" prop="industryOptions" label-width="115px">
                        <el-col :span="22">
                            <el-cascader
                                    disabled
                                    v-model="industryOptionsArr"
                                    :options="industryOptions"
                            >
                            </el-cascader>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="工作地址" property="companyAddressOptions">
                        <el-col :span="22">
                            <el-cascader
                                    disabled
                                    v-model="companyAddressOptionsArr"
                                    :options="companyAddressOptions"
                            >
                            </el-cascader>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="详细地址" prop="jobDetailAddress" label-width="115px">
                        <el-col :span="24">
                            <el-input disabled v-model="dataForm.jobDetailAddress" placeholder="详细地址"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="薪资范围" required>
                        <el-col :span="11">
                            <el-form-item prop="jobSalaryStart">
                                <el-input disabled v-model="dataForm.jobSalaryStart" style="width: 100%;" placeholder="薪资范围"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="jobSalaryEnd">
                                <el-input disabled v-model="dataForm.jobSalaryEnd" style="width: 100%;" placeholder="薪资范围"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="年龄要求" required>
                        <el-col :span="11">
                            <el-form-item prop="jobAgeStart">
                                <el-input disabled v-model="dataForm.jobAgeStart" style="width: 100%;" placeholder="年龄要求"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="jobAgeEnd">
                                <el-input disabled v-model="dataForm.jobAgeEnd" style="width: 100%;" placeholder="年龄要求"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form-item>


                    <el-form-item label="证书要求" prop="detailPosition" >
                        <el-select
                                disabled
                                v-model="positionCertifiCate"
                                clearable
                                multiple
                                placeholder="请选择">
                            <el-option
                                    v-for="item in certifiCateOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="职位福利" prop="detailPosition" label-width="100px">
                        <el-select
                                disabled
                                v-model="positionWalfare"
                                clearable
                                multiple
                                placeholder="请选择">
                            <el-option
                                    v-for="item in walfareOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="职位描述" prop="jobDescript">
                        <el-input
                                disabled
                                style="width: 500px"
                                type="textarea"
                                v-model="dataForm.jobDescript"
                                placeholder="职位描述"
                                :rows = "5"
                                :cols="50"
                                maxlength="100"
                                show-word-limit>
                        </el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
      <el-button @click="detailPositionDialogVisit = false">关闭</el-button>
    </span>
            </el-dialog>


        </div>
    </div>
</template>

<script>
    import commonApi from "@/api/commonApi";
    import workjobApi from "@/api/workjobs/workjobApi";

    export default {
        name: "my-deliver-info",
        data(){
            return{
                detailPositionDialogVisit:false,

                dataForm:{
                    jobName: '',
                    jobDescript: '',
                    jobDeptement: '',
                    jobContact: '',
                    jobPhone: '',
                    jobFixPhone: '',
                    jobWechat: '',
                    jobEmail: '',
                    jobQq: '',
                    isUrgency: '',                     //是否是急聘
                    companyId: '',
                    tradeId: '',
                    classifyId: '',
                    jobTypeId: '',
                    provincesId: '',
                    citysId: '',
                    areasId: '',
                    jobSalaryStart: '',
                    jobSalaryEnd: '',
                    jobApproveStatus: '',
                    jobIssueStatus: '',
                    jobRecruitStatus: '',
                    jobIsPass: '',
                    jobAgeStart: '',
                    jobAgeEnd: '',
                    jobDetailAddress: '',
                },
                userId:'',                        //当前的userId
                certifiCateOption:[],             //证书列表
                walfareOption:[],                 //福利列表


                positionCertifiCate:[],
                positionWalfare:[],

                industryOptions:[],               //行业的选项卡
                industryOptionsArr:[],            //选中的值
                //1000 1001 100101
                companyAddressOptions:[],         //地址的选项卡
                companyAddressOptionsArr:[],      //选中的值



                tableData:[],
                currentPage:1,
                pageSizes:[2,4,6,8],
                pageSize:3,
                total:0
            }
        },
        mounted() {
            this.loadingUserPositionInfo()


            this.loadingCertificates()
            this.loadingWalfare()
            this.loadingAddress()
            this.loadingIndustory()
        },
        methods:{

            /*加载证书*/
            loadingCertificates(){
                commonApi.loadingCertifiCate()
                    .then(data =>{
                        if (data.data.code === 0){
                            this.certifiCateOption = data.data.data
                        }
                    }).catch(err =>{
                    Promise.reject(err)
                })

            },
            /*加载福利*/
            loadingWalfare(){
                commonApi.loadingWelfare()
                    .then(data => {
                        if (data.data.code === 0){
                            this.walfareOption = data.data.data
                        }
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })
            },
            /*加载地址*/
            loadingAddress(){
                commonApi.loadingCompanyAddress()
                    .then(data =>{
                        if (data.data.code === 0){
                            this.companyAddressOptions =data.data.data
                        }
                    }).catch(error => {
                    Promise.reject(error)
                })
            },
            /*加载行业*/
            loadingIndustory(){
                commonApi.loadingIndustory()
                    .then(data => {
                        this.industryOptions = data.data.data
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })
            },


            /*查看职位的详情*/
            positionDetailInfo(object){
                console.log(object)
                object.isUrgency = object.isUrgency.toString()
                this.dataForm = object
                commonApi.loadingJobIdBelongAddress(object.id)
                    .then(data =>{
                        if (data.data.code === 0){
                            this.companyAddressOptionsArr = data.data.data
                            //console.log("this.companyAddressOptionsArr ====> ",this.companyAddressOptionsArr)
                        }
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })


                commonApi.loadingJobIdBelongIndustory(object.id)
                    .then(data => {
                        if (data.data.code === 0){
                            this.industryOptionsArr = data.data.data
                        }
                    }).catch(err =>{
                    Promise.reject(err)
                })


                commonApi.loadingJobIdBelongCertificates(object.id)
                    .then(data =>{
                        if (data.data.code === 0){
                            this.positionCertifiCate = data.data.data
                        }
                    })
                    .catch(err =>{
                        Promise.reject(err)
                    })


                commonApi.loadingJobIdBelongWalfare(object.id)
                    .then(data =>{
                        if (data.data.code === 0){
                            this.positionWalfare = data.data.data
                        }
                    })
                    .catch(err => {
                        Promise.reject(err)
                    })

                this.detailPositionDialogVisit = true;
            },


            /*查询出来用户投递的职位信息*/
            loadingUserPositionInfo(){
                const userId = JSON.parse(localStorage.getItem("user")).userId
                workjobApi.deliverFindUserPosition(userId,this.currentPage,this.pageSize)
                .then(data => {
                    console.log("tabledata ==>",data)
                    if (data.data.code === 0){
                        this.tableData = data.data.limitPage.list
                        this.total = data.data.limitPage.totalCount
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },


            handleSelect(){

            },

            //多选框信息
            handleSelectionChange(){

            },

            //当选择每一页的size数量改变时候触发
            handleSizeChange(value){
                console.log("SizeChange:",value)
                this.pageSize = value
                this.loadingUserPositionInfo()
            },
            handleCurrentChange(value){
                //console.log("currentPage:",value)
                this.currentPage = value
                this.loadingUserPositionInfo()
            },
        }
    }
</script>

<style>

</style>
